<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <div style="width:100%">

              <table class="table1style" style="font-size:12px;white-space: nowrap;">
                  <tr>
                      <td align="center">操作时间</td>
                      <td>
                          <table style="border-spacing: 0px;width:100%;">
                              <tr>
                                  <td style="padding:0px">
                                      <el-date-picker v-model="LogTimeStart" :clearable="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:150px;">
                                      </el-date-picker>
                                  </td>
                                  <td>至</td>
                                  <td style="padding:0px">
                                      <el-date-picker v-model="LogTimeEnd" type="date" :clearable="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:150px;"> </el-date-picker>
                                  </td>
                              </tr>
                          </table>
                      </td>
                      <td align="center"> 大&nbsp; &nbsp;类 </td>
                      <td>
                          <el-select v-model="LogKind" style="width:150px" clearable filterable>
                              <el-option v-for="(item,index) in LogKindOption" :key="index" :value="item.value" :label="item.label">
                                  <span style="float: left">{{ item.label }}</span>
                                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                              </el-option>
                          </el-select>
                      </td>
                      <td align="center">系统代号</td>
                      <td>
                          <el-select v-model="SysNo" style="width:150px" clearable filterable @change="SysNoChange($event)">
                              <el-option v-for="(item,index) in SysNoOption" :key="index" :value="item.value" :label="item.label">
                                  <span style="float: left">{{ item.label }}</span>
                                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                              </el-option>
                          </el-select>
                      </td>
                      <td align="center">操作用户</td>
                      <td>
                          <rm-ddl-common datatype="userinfo" dataname="用户" v-model="Userno" width="150px"></rm-ddl-common>
                      </td>
                  </tr>
                  <tr>
                      <td align="center">操作内容</td>
                      <td>
                          <el-input v-model="LogContent" style="width:100%`" clearable></el-input>
                      </td>
                      <td align="center">IP地址</td>
                      <td>
                          <el-input v-model="MacAddress" style="width:150px" clearable></el-input>
                      </td>
                      <td align="center">程序代号</td>
                      <td>
                          <el-select v-model="PrgNo" style="width:150px" clearable filterable remote :remote-method="remoteMethod" :loading="secloading">
                              <el-option v-for="(item,index) in options" :key="index" :value="item.value" :label="item.label">
                                  <span style="float: left">{{ item.label }}</span>
                                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                              </el-option>
                          </el-select>
                      </td>
                      <td align="center">操作电脑</td>
                      <td>
                          <el-input v-model="ComputerName" style="width:150px" clearable></el-input>
                      </td>
                  </tr>
              </table>

              <div class="operation-list">
                  <el-button @click="btnQuery" icon="el-icon-search" type="primary">查询</el-button>
                  <el-button @click="btnSort" icon="el-icon-sort">排序</el-button>
                  <el-button @click="btnClear" icon="el-icon-circle-close">清除</el-button>
                  <el-button @click="btnExport" icon="el-icon-download">导出</el-button>
              </div>

          </div>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <vxe-table :data.sync="tableData" :select-config="selectConfig" height="auto" highlight-current-row :loading="loading" highlight-hover-row highlight-hover-column resizable show-header-overflow="tooltip" border fit show-overflow="tooltip" header-align="center" size="mini" stripe ref="xTable1" @cell-dblclick="showmsg" :sort-config="{trigger: 'cell'}">
                  <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable v-for="items in tableColumn" :formatter="formatfun" :align="items.position"></vxe-table-column>
              </vxe-table>
          </div>
      </div>

      <el-dialog title="操作内容" :visible.sync="dialogmsg" width="50%" :close-on-click-modal="false">
          <div style="width:100%;height:580px;overflow:auto;border:3px double #ccc;padding:10px">
              {{msgshow}}
          </div>
      </el-dialog>

  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
export default {
  name: "MNG191",
  data() {
      return {
          isshow: false,
          selectConfig: { tigger: "row" },
          tableColumn: [
              { field: "logtime", title: "操作时间", width: 130 },
              { field: "logkind", title: "大类", width: 90, position: "center" },
              { field: "username", title: "操作人", width: 70, position: "center" },
              { field: "logcontent", title: "操作内容(双击开窗查看)", width: 500 },
              { field: "computername", title: "操作电脑IP", width: 90 },
              { field: "macaddress", title: "mac地址", width: 120 },
              { field: "sysno", title: "系统代号", width: 69, position: "center" },
              { field: "prgno", title: "程序名称", width: 200 },
              { field: "descriptions", title: "备注", width: 200 },
          ],
          tableData: [],
          loading: false,
          //LogTime: ["", ""],
          LogTimeStart: "",
          LogTimeEnd: "",
          MacAddress: "",
          ComputerName: "",
          SysNo: "",
          PrgNo: "",
          Userno: "",
          LogKind: "",
          LogContent: "",
          LogKindOption: [],
          PrgNoOption: [],
          SysNoOption: [],
          okFirstLoading: false,
          dialogmsg: false,
          secloading: false,
          msgshow: "",
          sortArr: [],
          options: [],
      };
  },
  created() {
      this.InitDate();
      this.InitOptions();
      this.SysNoChange(""); //初始化下拉框的数据
      //this.InitPage(); //初始化主列表
  },
  mounted() {},
  updated() {
      if (this.okFirstLoading) {
          let currentrow = this.$refs.xTable1.getData(0);
          if (currentrow) {
              this.okFirstLoading = false;
              this.$refs.xTable1.setCurrentRow(currentrow);
          }
      }
  },
  methods: {
      async InitOptions() {
          try {
              const res = await this.$tool.request({
                  url: "MNG/MNG1/MNG191",
                  method: "post",
                  data: {
                      action: "InitOptions",
                  },
              });
              this.LogKindOption = res.LogKindOption;
              //  this.PrgNoOption = res.PrgNoOption;
              this.SysNoOption = res.SysNoOption;
          } catch (err) {
              console.log(err);
          }
      },
      async SysNoChange(e) {
          try {
              const res = await this.$tool.request({
                  url: "MNG/MNG1/MNG191",
                  method: "post",
                  data: {
                      action: "SysNoChange",
                      sysno: e,
                  },
              });
              this.PrgNoOption = res.PrgNoOption;
              this.options = XEUtils.clone(this.PrgNoOption, true);
          } catch (err) {
              console.log(err);
          }
      },
      formatfun({ row, column, cellValue }) {
          if (column.property == "prgno") {
              try {
                  let data = this.PrgNoOption.filter((item) => item.value == cellValue);
                  if (data.length > 0) {
                      return data[0].label + "(" + cellValue + ")";
                  } else {
                      return cellValue;
                  }
              } catch (e) {
                  return cellValue;
              }
          } else {
              return cellValue;
          }
      },
      async InitPage() {
          try {
              this.loading = true;
              const res = await this.$tool.request({
                  url: "MNG/MNG1/MNG191",
                  method: "post",
                  data: {
                      action: "InitPage",
                      LogTimeStart: this.LogTimeStart, //this.LogTime[0],
                      LogTimeEnd: this.LogTimeEnd, //this.LogTime[1],
                      MacAddress: this.MacAddress,
                      ComputerName: this.ComputerName,
                      SysNo: this.SysNo,
                      PrgNo: this.PrgNo,
                      Userno: this.Userno,
                      LogKind: this.LogKind,
                      LogContent: this.LogContent,
                      sort: this.sortArr,
                  },
              });
              //this.tableColumn = res.Cols;
              this.tableData = res.Data;
              this.okFirstLoading = true;
              this.loading = false;
          } catch (err) {
              this.loading = false;
              console.log("MNG191", err);
          }
      },
      InitDate() {
          // var day1 = new Date();
          // day1.setTime(day1.getTime());
          // var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate() + " 23:59:59";
          // var day2 = new Date();
          // day2.setTime(day2.getTime() - 24 * 60 * 60 * 1000 * 1);
          // var s2 = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate() + " 00:00:00";
          // this.LogTime = [s2, s1];
          this.LogTimeStart = this.$pub.InitDate(); //s2;
          this.LogTimeEnd = this.$pub.InitDate(); // s1;
      },
      btnQuery() {
          this.InitPage();
      },
      btnClear() {
          this.InitDate();
          this.MacAddress = "";
          this.ComputerName = "";
          this.SysNo = "";
          this.PrgNo = "";
          this.Userno = " ";
          this.LogKind = "";
          this.LogContent = "";
          this.tableData = [];
          this.sortArr = [];
      },
      btnSort() {
          this.$rmsort(
              { tableColumn: this.tableColumn, sortArr: this.sortArr },
              {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
              }
          )
              .then((res) => {
                  this.sortArr = res.data;
                  this.InitPage();
              })
              .catch(() => {});
      },
      btnExport() {},
      showmsg({ row, column }) {
          if (column.property == "logcontent") {
              this.msgshow = row["logcontent"];
          }
          this.dialogmsg = true;
      },
      remoteMethod(query) {
          if (!!query) {
              this.secloading = true;
              setTimeout(() => {
                  this.secloading = false;
                  this.options = this.PrgNoOption.filter((item) => {
                      return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1 || item.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
                  });
              }, 200);
          } else {
              this.options = XEUtils.clone(this.PrgNoOption, true);
          }
      },
  },
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  height: 100px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
  overflow-x: auto;
  overflow-x: overlay;
}

.pagecenter {
  position: absolute;
  top: 105px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
.table1style {
  padding: 0px 5px 0px 5px;
  font-size: 12px;
}
.operation-list {
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
}
::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
</style>
